<template>
    <div>
        <!--顶部搜索框区域-->
        <div style="margin-top: 20px;display: flex;flex-wrap: wrap;" class="header">
            <div>
                <el-button type="primary" style="margin-left: 10px;  " plain :icon="Plus" @click="addPeople">新增
                </el-button>
            </div>
            <div>
                <el-input v-model="searchContent.name" style="width: 240px;margin-left: 10px;"
                          placeholder="请输入姓名"/>
            </div>
            <div>
                <el-form-item style="width: 240px;">
                    <el-select v-model="searchContent.department" placeholder="部门">
                        <el-option label="开发部" :value="'开发部'"/>
                        <el-option label="媒体部" :value="'媒体部'"/>
                        <el-option label="组织部" :value="'组织部'"/>
                    </el-select>
                </el-form-item>
            </div>
            <div>
                <el-form-item style="width: 240px;">
                    <el-select v-model="searchContent.grade" placeholder="年级">
                        <el-option label="2022级" :value="2022"/>
                        <el-option label="2023级" :value="2023"/>
                        <el-option label="2024级" :value="2024"/>
                    </el-select>
                </el-form-item>
            </div>
            <div>
                <el-form-item style="width: 240px;">
                    <el-select v-model="searchContent.major" placeholder="专业">
                        <el-option label="数字媒体技术" :value="'数字媒体技术'"/>
                        <el-option label="计算机科学与技术" :value="'计算机科学与技术'"/>
                        <el-option label="数据科学与大数据技术" :value="'数据科学与大数据技术'"/>
                        <el-option label="信息计算与科学" :value="'信息计算与科学'"/>
                    </el-select>
                </el-form-item>
            </div>
            <div>
                <el-button type="primary" @click="search">搜索</el-button>
            </div>
            <div>
                <el-button type="warning" plain icon="UploadFilled" @click="exportMember">导出</el-button>
            </div>
            <div>
                <el-button
                    style="float: left; margin-left: 10px; margin-bottom: 12px"
                    :icon="Refresh"
                    @click="clearSearch"
                    type="warning"
                    plain
                >重置</el-button>
            </div>
        </div>
        <!--表单内容区域-->
        <main>
            <el-table :data="tableData" style="width: 100%; margin-top: 10px;" :cell-style="rowClass"
                      :header-cell-style="headClass" tooltip-effect="dark">
                <el-table-column prop="name" label="姓名"/>
                <el-table-column prop="gender" label="性别"
                                 :formatter="(row) => row.gender === 1 ? '男' : row.gender === 2 ? '女' : '未填写'"/>
                <el-table-column prop="studentId" label="学号"/>
                <el-table-column prop="contact" label="联系方式"/>
                <el-table-column prop="joinDate" label="加入时间"/>
                <el-table-column prop="department" label="所属部门"/>
                <el-table-column prop="major" label="专业"/>
                <el-table-column prop="grade" label="年级"/>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </main>
        <!--分页组件-->
        <div style="margin-top: 20px;margin-left: 10px;">
            <el-pagination :page-sizes="[8, 10]"
                           background layout="total, sizes, prev, pager, next, jumper"
                           :total="total" :current-page="page.currentPage" :page-size="page.pageSize"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
            />
        </div>
        <!--dialong组件-->
        <!--添加-->
        <el-dialog
            v-model="addVisible"
            title="添加人员"
            width="400"
            center
        >
            <el-form :model="addInput" label-width="auto" style="width: 100%;">
                <el-form-item label="姓名">
                    <el-input v-model="addInput.name"/>
                </el-form-item>

                <el-form-item label="性别 ">
                    <el-select v-model="addInput.gender">
                        <el-option label="男" :value="0"/>
                        <el-option label="女" :value="1"/>
                    </el-select>
                </el-form-item>

                <el-form-item label="学号 ">
                    <el-input v-model="addInput.studentId"/>
                </el-form-item>

                <el-form-item label="联系方式 ">
                    <el-input v-model="addInput.contact"/>
                </el-form-item>
                <el-form-item label="部门 ">
                    <el-select v-model="addInput.department" placeholder="请选择部门">
                        <el-option label="开发部" :value="'开发部'"/>
                        <el-option label="组织部" :value="'组织部'"/>
                        <el-option label="媒体部" :value="'媒体部'"/>
                    </el-select>

                </el-form-item>
                <el-form-item label="专业">
                    <el-input v-model="addInput.major"/>
                </el-form-item>
                <el-form-item label="年级">
                    <el-input v-model="addInput.grade"/>
                </el-form-item>

            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="danger" plain @click="addVisible = false">取消</el-button>
                    <el-button type="primary" @click="addPepleK">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--编辑-->
        <el-dialog
            v-model="editVisible"
            title="编辑"
            width="400"
            center
        >
            <el-form :model="editInput" label-width="auto" style="width: 100%;">
                <el-form-item label="姓名">
                    <el-input v-model="editInput.name"/>
                </el-form-item>

                <el-form-item label="性别 ">
                    <el-select v-model="editInput.gender">
                        <el-option label="男" :value="1"/>
                        <el-option label="女" :value="2"/>
                    </el-select>
                </el-form-item>

                <el-form-item label="学号 ">
                    <el-input v-model="editInput.studentId"/>
                </el-form-item>

                <el-form-item label="联系方式 ">
                    <el-input v-model="editInput.contact"/>
                </el-form-item>
                <el-form-item label="部门 ">
                    <el-select v-model="editInput.department">
                        <el-option label="开发部" :value="'开发部'"/>
                        <el-option label="组织部" :value="'组织部'"/>
                        <el-option label="媒体部" :value="'媒体部'"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="专业">
                    <el-input v-model="editInput.major"/>
                </el-form-item>
                <el-form-item label="年级">
                    <el-input v-model="editInput.grade"/>
                </el-form-item>

            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="danger" plain @click="editVisible = false">取消</el-button>
                    <el-button type="primary" @click="editFetch">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--删除-->
        <el-dialog
            v-model="deleteVisible"
            title="确认删除?"
            width="200"
            center
        >
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="danger" plain @click="deleteVisible = false">取消</el-button>
                    <el-button type="primary" @click="deletePeple">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>


</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import {Plus,Refresh} from '@element-plus/icons-vue'
import {listMemberVOByPage, addMember, deleteMember, editMember} from "@/api/api.js";
import {exportExcel} from "@/utils/excel.js";
import {ElMessage} from "element-plus";


const searchContent = reactive({
    name: '',
    department: '',
    grade: '',
    major: ''
})

// region 分页
const page = reactive({
    currentPage: 1,
    pageSize: 10,
})

const total = ref(10)
onMounted(() => {
    listMemberVOByPage(page).then((res) => {
        total.value = parseInt(res.data.total)
        tableData.value = res.data.records
    })
})

const handleSizeChange = (val) => {
    Object.assign(page,searchContent)
    page.pageSize = val
    //每页显示条数发生变化时,要加上搜索条件
    listMemberVOByPage(page).then((res) => {
        tableData.value = res.data.records
    })
}
const handleCurrentChange = (val) => {
    Object.assign(page,searchContent)
    page.currentPage = val
    listMemberVOByPage(page).then((res) => {
        tableData.value = res.data.records
    })
}
// endregion
//搜索相关
const exportMember=()=>{
    exportExcel('/member/exportMemberExcel')
}

async function search() {
    //提取分页属性
    // Object.entries(page).forEach(([key, value]) => {
    //     searchContent[key] = value;
    // });
    searchContent['currentPage'] =1;
    searchContent['pageSize']=10;
    let response = await listMemberVOByPage(searchContent)
    total.value = parseInt(response.data.total)
    tableData.value = response.data.records
    page.currentPage=1
    page.pageSize=10
}
const clearSearch = () => {
    Object.keys(searchContent).forEach(key=>{
        console.log(searchContent[key]='')
    })
    searchContent['currentPage'] =1;
    searchContent['pageSize']=10;
    listMemberVOByPage(searchContent).then((response)=>{
        total.value = parseInt(response.data.total)
        tableData.value = response.data.records
        page.currentPage = 1
    })


};

// region表格样式
const rowClass = () => ({'text-align': 'center'})
const headClass = () => ({'text-align': 'center', background: '#f8f8f9'})
//endregion
//表格数据
const tableData = ref([])

//region增加
const addVisible = ref(false)
//清空
const resetAddInput = () => {
    Object.keys(addInput).forEach(key => {
        if (typeof addInput[key] === 'number') {
            addInput[key] = 1
        } else {
            addInput[key] = ''
        }
    })
}
const addInput = reactive({
    name: '',
    gender: parseInt('0'),
    studentId: '',
    contact: '',
    department: '',
    major: '',
    grade: ''
})
const addPeople = () => {
    addVisible.value = true;
}

async function addPepleK() {
    try {
        let res = await addMember(addInput)
        if (res.code !== 50000) {
            let response = await listMemberVOByPage(page)
            total.value = parseInt(response.data.total)
            tableData.value = response.data.records
            addVisible.value = false
            resetAddInput() // 清空addInput
            ElMessage.success("添加成功")
        } else {
            ElMessage.warning("添加失败")
        }
    } catch (error) {
        console.error('添加成员时发生错误:', error)
        ElMessage.error("添加失败，请稍后重试")
    }
}

// endregion
//region删除
const deleteVisible = ref(false)
//要删除的学号
const deleteId = ref('')
const handleDelete = (scope) => {
    deleteId.value = scope.id
    deleteVisible.value = true
}

async function deletePeple() {
    await deleteMember({id: deleteId.value})
    let response = await listMemberVOByPage(page)
    total.value = parseInt(response.data.total)
    tableData.value = response.data.records
    deleteVisible.value = false
    ElMessage.warning("删除成功")
}

//endregion
//region编辑
const editVisible = ref(false)
let editInput = reactive({
    id: '',
    name: '',
    gender: '',
    studentId: '',
    contact: '',
    department: '',
    major: '',
    grade: ''
});
const handleEdit = (scope) => {
    editVisible.value = true
    Object.assign(editInput,scope)
}

async function editFetch() {
    await editMember(editInput)
    let response = await listMemberVOByPage(page)
    total.value = parseInt(response.data.total)
    tableData.value = response.data.records
    editVisible.value = false
    ElMessage.success("操作成功")
}

//endregion
</script>

<style scoped>
.header > div {
    margin-left: 10px;
}
</style>


